<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件监听器</title>
    <style>
        #d1{
            width: 150px;
            height: 150px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <input id="btn" type="button" value="事件处理按钮" onclick="sayHello()">
        <input id="addEvent" type="button" value="添加事件">
        <input id="removeEvent" type="button" value="删除事件">
    </div>
    <div id="d1"></div>
    <script>
        // HTML事件监听器：直接将事件监听器嵌入在html标签中。
        // 这种做法会导致JS和HTML代码混淆在一起，不利于代码维护，不建议使用。
        function sayHello(){
            console.log('hello')
        }

        // DOM0事件监听器：通过点运算符将事件处理函数绑定在元素节点上，
        // 这种事件监听器在各种浏览器上都通用
        // 不会重复添加事件
        // 删除事件：直接将对应的事件监听器赋值为空
        let addEvent = document.getElementById("addEvent");
        let removeEvent = document.getElementById("removeEvent");
        let d1 = document.getElementById("d1");
        addEvent.onclick = function(){
            d1.onclick = function(){
                console.log("d1被点击");
            }
        }
        removeEvent.onclick = function(){
            d1.onclick = null;
        }

    </script>
</body>
</html>